import React, { useEffect } from "react"
import styles from "./index.module.scss"
import { NavLink } from "react-router-dom"
import {
  Button,
  Form,
  Radio,
  DatePicker,
  ConfigProvider,
  Tag,
  message,
  Modal
} from "antd"
import zhCN from "antd/es/locale/zh_CN" // 引入中文包
import { getArticles, delArticle } from "../../store/action"
import { Table, Space } from "antd"
import { useDispatch, useSelector } from "react-redux"
import Channel from "../../components/Channel"
import defaultImg from "../../assets/images/error.png"
import { ExclamationCircleOutlined } from "@ant-design/icons"
function Content() {
  const dispatch = useDispatch()

  // 获取文章列表
  useEffect(() => {
    dispatch(getArticles({}))
  }, [dispatch])
  // 获取文章列表
  const { list, count, page, pageSize } = useSelector((state) => state.article)
  // 优化文章状态的处理
  const articleStatus = {
    0: { color: "yellow", text: "草稿" },
    1: { color: "#ccc", text: "待审核" },
    2: { color: "green", text: "审核通过" },
    3: { color: "red", text: "审核失败" }
  }
  const columns = [
    {
      title: "封面",
      dataIndex: "cover",
      key: "cover",
      render: (cover) => {
        return (
          <img
            src={cover ? cover : defaultImg}
            width={200}
            height={150}
            alt=""
          />
        )
      }
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      width: 220
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status) => {
        return (
          <>
            <Tag color={articleStatus[status].color}>
              {articleStatus[status].text}
            </Tag>
          </>
        )
      }
    },
    {
      title: "发布时间",
      key: "pubdate",
      dataIndex: "pubdate"
    },
    {
      title: "阅读数",
      key: "read_count",
      dataIndex: "read_count"
    },
    {
      title: "评论数",
      key: "comment_count",
      dataIndex: "comment_count"
    },
    {
      title: "点赞数",
      key: "like_count",
      dataIndex: "like_count"
    },
    {
      title: "操作",
      key: "action",
      render: ({ id }) => (
        <Space size="middle">
          <Button type="primary" shape="circle">
            <NavLink to={`/home/article?id=${id}`}>
              <svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="edit"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
              </svg>
            </NavLink>
          </Button>
          <Button
            shape="circle"
            type="primary"
            danger
            onClick={() => deleteArticle(id)}
          >
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="delete"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path>
            </svg>
          </Button>
        </Space>
      )
    }
  ]
  const { RangePicker } = DatePicker
  // 筛选
  const onSearch = (values) => {
    const { channel, radio, time } = values
    // 请求接口需要的数据

    const params = {}
    // 判断是否选择文章状态
    if (radio !== -1) {
      params.status = radio
    }
    if (typeof channel !== "undefined") {
      params.channel_id = channel
    }
    if (typeof time !== "undefined" && time !== null) {
      params.begin_pubdate = time[0].format("YYYY-MM-DD HH:mm:ss")
      params.end_pubdate = time[1].format("YYYY-MM-DD HH:mm:ss")
    }
    // 重新获取文章列表
    dispatch(getArticles(params))
  }
  // 删除
  const deleteArticle = (id) => {
    Modal.confirm({
      title: "温馨提示",
      icon: <ExclamationCircleOutlined />,
      content: "此操作将永久删除该文章, 是否继续？",
      okText: "确认",
      confirmLoading: true,
      cancelText: "取消",
      onOk: async () => {
        // 确认删除
        await dispatch(delArticle(id))
        // 重新获取数据
        await dispatch(getArticles({}))
        // 刷新页面
        message.success("删除成功")
      }
    })
  }
  // 分页
  const changePage = (value) => {
    dispatch(getArticles({ page: value.current, per_page: value.pageSize }))
    // console.log(value.current)
  }
  return (
    <div className={styles.content_main}>
      <div className={styles.content_title}>
        <span>
          <NavLink to="/home">首页</NavLink>
        </span>
        <span className={styles.middle}>&gt;</span>
        <span>内容管理</span>
      </div>
      <div className={styles.content_screen}>
        <ConfigProvider locale={zhCN}>
          <Form
            name="basic"
            initialValues={{
              radio: -1
            }}
            onFinish={onSearch}
          >
            <Form.Item label="状态" name="radio">
              <Radio.Group>
                <Radio value={-1}>全部</Radio>
                <Radio value={0}>草稿</Radio>
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>审核通过</Radio>
                <Radio value={3}>审核失败</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="频道" name="channel">
              <Channel width={264} />
            </Form.Item>
            <Form.Item label="日期" name="time">
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                筛选
              </Button>
            </Form.Item>
          </Form>
        </ConfigProvider>
      </div>
      <div className={styles.content_result}>
        <div className={styles.result_title}>
          根据筛选条件共查询到 {count} 条结果：
        </div>
        <div className={styles.result_table}>
          <Table
            onChange={changePage}
            pagination={{
              current: page,
              pageSize: pageSize,
              showQuickJumper: true,
              total: count,
              position: ["bottomCenter"]
            }}
            columns={columns}
            dataSource={list}
          />
        </div>
      </div>
    </div>
  )
}

export default Content
